<template>
  <div class="houseAdd">
    <van-collapse v-model="activeName">
      <van-collapse-item title="区 县">
        <van-tag
          color="#a3a0a0"
          plain
          round
          v-for="(item, index) in countyList"
          :key="index"
          @click="checkActive(item, index)"
          :class="isActive == index && isActive !== false ? 'active' : ''"
          >{{ item }}</van-tag
        >
      </van-collapse-item>
      <van-collapse-item title="职业类型">
        <van-tag
          color="#a3a0a0"
          plain
          round
          v-for="(item, index) in occupationList"
          :key="index"
          @click="checkActive2(item, index)"
          :class="isActive2 == index && isActive2 !== false ? 'active' : ''"
          >{{ item }}</van-tag
        >
      </van-collapse-item>
      <van-collapse-item title="信用等级">
        <van-tag
          color="#a3a0a0"
          plain
          round
          v-for="(item, index) in creditList"
          :key="index"
          @click="checkActive3(item, index)"
          :class="isActive3 == index && isActive3 !== false ? 'active' : ''"
          >{{ item }}</van-tag
        >
      </van-collapse-item>
      <van-collapse-item title="已认证客户服务数">
        <van-tag
          color="#a3a0a0"
          plain
          round
          v-for="(item, index) in certifiedList"
          :key="index"
          @click="checkActive4(item, index)"
          :class="isActive4 == index && isActive4 !== false ? 'active' : ''"
          >{{ item }}</van-tag
        >
      </van-collapse-item>
      <van-collapse-item title="公司规模">
        <van-tag
          color="#a3a0a0"
          plain
          round
          v-for="(item, index) in companyList"
          :key="index"
          @click="checkActive5(item, index)"
          :class="isActive5 == index && isActive5 !== false ? 'active' : ''"
          >{{ item }}</van-tag
        >
      </van-collapse-item>
      <div>
        <span class="yxtext" v-if="arr.length">已 选 :</span>
        <van-tag
          closeable
          plain
          round
          v-for="(item, index) in arr"
          :key="index"
          >{{ item }}</van-tag
        >
      </div>
    </van-collapse>
    <!-- 按钮 -->
    <div class="housebtn">
      <van-button round type="info" color="#3F51B5" @click="eliminate"
        >清除条件</van-button
      >
      <van-button round type="info" color="#3F51B5" @click="goScreening"
        >选择条件</van-button
      >
    </div>
  </div>
</template>
<script>
// 弹出层数据
import { gethousekeeping } from '@/api/home.js'
export default {
  name: 'houseAdd',
  data () {
    return {
      arr: [],
      show: false,
      activeName: [],
      countyList: [], // 区域地址
      occupationList: [], // 职业类型
      creditList: [], // 信用等级
      certifiedList: [], // 已认证客户服务数
      companyList: [], // 公司规模
      isActive: false, // 职业类型高亮
      isActive2: false, // 学历高亮
      isActive3: false, // 民族类型高亮
      isActive4: false, // 婚姻状况高亮
      isActive5: false // 星座高亮高亮
    }
  },
  computed: {

  },
  created () {
    // 初始化渲染
    this.initrendering()
  },
  methods: {
    // 获取数据
    async initrendering () {
      try {
        const res = await gethousekeeping()
        // console.log(res.data[0])
        this.countyList = res.data[0].county
        this.occupationList = res.data[0].occupation
        this.creditList = res.data[0].credit
        this.certifiedList = res.data[0].certified
        this.companyList = res.data[0].company
      } catch (err) {
        this.$toast.fail('获取失败')
      }
    },
    // 点击高亮
    checkActive (item, index) {
      this.isActive = index
      const i = this.arr.indexOf(item)
      if (i === -1) {
        this.arr.push(item)
      }
    },
    checkActive2 (item, index) {
      this.isActive2 = index
      const i = this.arr.indexOf(item)
      if (i === -1) {
        this.arr.push(item)
      }
    },
    checkActive3 (item, index) {
      this.isActive3 = index
      const i = this.arr.indexOf(item)
      if (i === -1) {
        this.arr.push(item)
      }
    },
    checkActive4 (item, index) {
      this.isActive4 = index
      const i = this.arr.indexOf(item)
      if (i === -1) {
        this.arr.push(item)
      }
    },
    checkActive5 (item, index) {
      this.isActive5 = index
      const i = this.arr.indexOf(item)
      if (i === -1) {
        this.arr.push(item)
      }
    },
    // 清除条件
    eliminate () {
      this.arr = []
      this.isActive = false
      this.isActive2 = false
      this.isActive3 = false
      this.isActive4 = false
      this.isActive5 = false
    },
    // 选择条件后跳转
    goScreening () {
      if (this.arr.length < 4) {
        return this.$toast.fail('请选择必要条件')
      }
      this.$router.push('/select')
    }
  }
}
</script>
<style lang="less" scoped>
.houseAdd {
  /deep/.van-cell__title {
    margin-top: 30px;
  }
  /deep/ .van-cell {
    font-size: 30px;
    font-weight: 700;
  }
  .active {
    color: #3f51b5 !important;
  }
  .van-tag {
    padding: 10px 25px;
    margin: 8px 10px;
  }
  .housebtn {
    display: flex;
    justify-content: center;
    /deep/ .van-button {
      width: 320px;
      height: 70px;
      margin: 30px 28px;
    }
  }
  .yxtext {
    font-size: 30px;
    font-weight: 700;
    margin-left: 30px;
  }
}
</style>
